<template>
    <div class="main">
        <button @click="on_run">运行代码</button>
        <component :is="'card-'+componentId" v-if="show"></component>
        <Editor ref="codeEdit" :codeHandler="onChange" :value="value" ></Editor>
    </div>
</template>

<script>
import {
    runComponent
} from '../utils/sfc-loader'
import Editor from './codemirror.vue'
export default {
    data() {
        return {
            componentId: 'ceshi',
            show: false,
            content: '',
            value: '',
            cardName: 'ceshi'
        }
    },
    components: {
        Editor
    },
    created() {
        this.get_list()
    },
    methods: {
        async on_run() {
            this.show = false
            console.log(this.content);
            let fullName = this.cardName + new Date().getTime()
            this.componentId = this.cardName + new Date().getTime()
            let name = 'card-' + fullName + '.vue'
            // console.log(ceshi);
            sessionStorage.setItem(name, this.content)
            await runComponent(fullName)
            this.show = true
        },
        get_list() {
            let name = this.componentId + '.vue'
            // console.log(ceshi);
            // sessionStorage.setItem(name, getContentData)
            // runComponent('ceshi')
            // this.show = true
        },
        callbackChangeEditor (value) {
        this.content = value
      },
      onChange(val) {
        this.content = val
        this.value = val
      }
    },
}
</script>
